<template>
  <div class="home-container">
    <Sidebar class="sidebar" @select-domain="handleDomainSelect" />
    <div class="main-content">
      <TopNav />
      <div class="scrollable-content">
        <SearchBox @search="handleSearch" />
        <NewsTrend />
        <div class="app-categories">
          <div 
            v-for="(category, index) in categories" 
            :key="category.id"
            :id="`category-${index}`"
            class="category-section"
          >
            <AppGrid 
              :title="category.title"
              :featured="category.featured"
              :apps="category.apps"
            />
          </div>
        </div>
      </div>
    </div>
    <PageIndicator :categories="categories" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const categories = ref([
  {
    id: 1,
    title: '开发工具',
    featured: {
      name: 'Visual Studio Code',
      image: '/placeholder-image.jpg'
    },
    apps: [
      { id: 1, name: 'Git', icon: '/git-icon.png', url: 'https://git-scm.com' },
      { id: 2, name: 'Node.js', icon: '/nodejs-icon.png', url: 'https://nodejs.org' },
      { id: 3, name: 'Docker', icon: '/docker-icon.png', url: 'https://docker.com' },
    ]
  },
  {
    id: 2,
    title: '设计资源',
    featured: {
      name: 'Figma',
      image: '/placeholder-image.jpg'
    },
    apps: [
      { id: 1, name: 'Dribbble', icon: '/dribbble-icon.png', url: 'https://dribbble.com' },
      { id: 2, name: 'Behance', icon: '/behance-icon.png', url: 'https://behance.net' },
      { id: 3, name: 'Sketch', icon: '/sketch-icon.png', url: 'https://sketch.com' },
    ]
  },
  {
    id: 3,
    title: '生产力工具',
    featured: {
      name: 'Notion',
      image: '/placeholder-image.jpg'
    },
    apps: [
      { id: 1, name: 'Slack', icon: '/#', url: 'https://slack.com' },
      { id: 2, name: 'Trello', icon: '/#', url: 'https://trello.com' },
      { id: 3, name: 'Asana', icon: '/#', url: 'https://asana.com' },
    ]
  }
]);

const handleDomainSelect = (index: number) => {
  // 处理领域选择
  console.log('Selected domain:', index);
};

const handleSearch = (query: string) => {
  // 处理搜索
  console.log('Search query:', query);
};
</script>

<style scoped>
.home-container {
  display: flex;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.main-content {
  flex: 1;
  margin-left: 100px; /* 与侧边栏宽度相同 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  padding-right: 60px; /* 为右侧导航点留出空间 */
}

.app-categories {
  padding: 1rem 0;
}

.category-section {
  scroll-margin-top: 100px; /* 确保滚动到分类时有足够的上边距 */
}
</style> 